:root
  #nav
    height: 72px
    z-index: 10
    @media mq-mobile
      height: auto
      min-height: 72px
    @media mq-tablet
      height: auto
      min-height: 72px
  #banner
    opacity: 0
  &[showBanner="true"]
    &[hasBanner="true"]
      #nav
        height: calc(40vh - 72px)
        filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.04))
        &.is_home
          height: calc(60vh - 72px)
      #banner
        opacity: 1
        top: 0
    &[hasBanner="desktop"]      // hide banner for mobile view if the post has cover image
      @media mq-normal          // duplicated code because @extend doesn't work inside @media
        #nav
          height: calc(40vh - 72px)
          filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.04))
          &.is_home
            height: calc(60vh - 72px)
        #banner
          opacity: 1
          top: 0

#banner
  height: 40vh
  width: 100%
  position: absolute
  overflow: hidden
  transition: opacity trans-style, top trans-style
  top: -40px
  &.hide
    opacity: 0
  &.is_home
    height: 60vh
  img
    height: 100%
    width: 100%
    object-fit: cover
    object-position: convert(hexo-config("banner.position"))
  #banner-dim
    height: 100%
    width: 100%
    position: absolute
    top: 0
    background: var(--banner-dim)
    transition: background trans-style

navbar
  @extend $card
  height: 72px
  display: flex
  justify-content: space-between
  align-items: center
  position: sticky
  margin: 0 auto
  border-radius: 0 0 card-radius card-radius
  top: 0

#title-nav
  margin-left: 16px
  a
    color: var(--btn-text-content)
    height: 52px
    border-radius: inner-radius
    align-items: center
    padding: 0 20px
    display: flex
    font-size: 16px
    font-weight: bold
    transition: background trans-style
    &:hover
      background: var(--btn-text-hover)
    &:active
      background: var(--btn-text-active)
    #vivia-logo
      display: flex
      flex-wrap: wrap
      gap: 4px
      width: 20px
      height: 20px
      transform: rotate(45deg)
      margin-right: 20px
      .dot
        height: 8px
        width: 8px
        border-radius: 50%
        background: var(--btn-text-content)

#main-nav
  float: left
  display: flex
  gap: 8px
  @media mq-mobile
    display: none
  @media mq-tablet
    display: none

$nav-link
  float: left
  color: var(--btn-text-neutral-text)
  fill: var(--btn-text-neutral-text)    // for svg icons
  text-decoration: none
  display: block
  border-radius: inner-radius
  transition: background trans-style, color trans-style
  &:hover
    background: var(--btn-text-hover)
    color: var(--btn-text-light-text)
    fill: var(--btn-text-light-text)
  &:active
    background: var(--btn-text-active)

.nav-icon
  @extend $nav-link
  font-family: font-icon
  text-align: center
  font-size: font-size
  width: 44px
  height: 44px
  display: flex
  position: relative
  cursor: pointer
  justify-content: center
  align-items: center
  &.mobile-hide
    @media mq-mobile
      display: none
    @media mq-tablet
      display: none
  .rss
    font-weight: 300
  .light-mode-icon
    position: absolute
    height: 20px
    opacity: var(--display-light-icon)
    transition: opacity trans-style
  .dark-mode-icon
    position: absolute
    height: 20px
    opacity: var(--display-dark-icon)
    transition: opacity trans-style

#nav-menu-btn
  @media mq-normal
    display: none

#nav-dropdown
  margin-top: - card-radius
  background: var(--nav-dropdown-bg)
  transition: background trans-style, height trans-style
  border-radius: 0 0 card-radius card-radius
  overflow: hidden
  height: fit-content
  @media mq-normal
    display: none
  &.hidden
    height: 0
  #dropdown-link-list
    padding-top: card-radius + 8px
    padding-bottom: 8px
    .nav-dropdown-link
      display: flex
      align-items: center
      padding-left: 32px
      height: 40px
      width: 100%
      display: flex
      color: var(--neut-L75)
      font-weight: bold
      transition: color trans-style
      &:hover
      &:active
        color: var(--primary)

.main-nav-link
  @extend $nav-link
  font-weight: bold
  height: 44px
  padding: 0px 16px
  display: flex
  align-items: center

#main-nav-toggle
  display: none
  &:before
    content: "\f0c9"
  @media mq-mobile
    display: block

#sub-nav
  margin-right: 16px
  display: flex
  gap: 4px
